import { useState } from 'react'
import Header from './components/Header'
import Hero from './components/Hero'
import Features from './components/Features'
import Testimonials from './components/Testimonials'
import Footer from './components/Footer'
import './styles/index.css'
import styled from '@emotion/styled'

const ThemeToggle = styled.button`
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: var(--accent-color);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 40;
  
  &:hover {
    transform: scale(1.1);
  }
`

function App() {
  const [isDark, setIsDark] = useState(true)

  const toggleTheme = () => {
    setIsDark(!isDark)
    document.documentElement.setAttribute('data-theme', isDark ? 'light' : 'dark')
  }

  return (
    <div className="relative">
      <Header isDark={isDark} />
      <Hero />
      <Features />
      <Testimonials />
      <Footer />
      <ThemeToggle onClick={toggleTheme}>
        {isDark ? '🌞' : '🌙'}
      </ThemeToggle>
    </div>
  )
}

export default App
